<template>
    <Popup
        v-model="visiable"
        position="bottom"
        :class="`tech-choose-goods ${mode} ${styleMode}`"
        overlay-class="tech-choose-goods-overlay"
        :close-on-click-overlay="false"
        @click-overlay="close"
    >
        <div class="product-content">
            <!-- 顶部 -->
            <ChooseHeader
                :imgSrc="imgSrc"
                :name="info.name"
                :price="selectPrice"
                :selectStr="selectStr"
                :isMulit="info.skus.length > 1"
                @close="close"
            />
            <div class="product-info">
                <!-- 属性 -->
                <template v-for="(item, index) in info.groups">
                    <ChooseColumn :title="item.name" :mode="mode" :theme="theme" :styleMode="styleMode" :key="index">
                        <ChooseItem
                            v-for="(temp, temIndex) in item.items"
                            :key="temIndex"
                            :itemName="temp"
                            :isSelected="selectProperties[index] ? selectProperties[index] === temp : false"
                            @select="(detail) => selectPropertie(detail, index)"
                        />
                    </ChooseColumn>
                </template>
                <!-- 数量 -->
                <ChooseColumn title="购买数量" :mode="mode" :theme="theme" :styleMode="styleMode">
                    <ChooseCount
                        :mode="mode"
                        :theme="theme"
                        :styleMode="styleMode"
                        @countChange="countChange"
                    />
                </ChooseColumn>
            </div>
            <div class="action-btn-container">
                <Button class="tech-btn" :disabled="isDisableAction" :style="themeBackround" :round="buttonRound" size="large" @click="ensureAction">{{actionBtnText}}</Button>
            </div>
        </div>
    </Popup>
</template>

<script>
import { Popup, Button } from 'vant';
import ChooseHeader from './ChooseHeader';
import ChooseColumn from './ChooseColumn';
import ChooseItem from './ChooseItem';
import ChooseCount from './ChooseCount';
import { compareArray, createShopImageSrc } from '@common/utils';
import { getDefaultSku } from '@biztools/shopDetail';
import logger from '@common/logger';

import ModeMixin from '@common/mixin';
export default {
    name: 'ChooseGoods', // 选择弹窗
    mixins: [ModeMixin],
    components: {
        Popup,
        Button,
        ChooseHeader,
        ChooseColumn,
        ChooseItem,
        ChooseCount,
    },
    props: {
        info: {
            type: Object,
            default() {
                return {};
            },
        },
        isOnlySelect: {
            type: Boolean,
            default: false,
        },
        isChangeSku: {
            type: Boolean,
            default: false,
        },
        isAddBag: {
            type: Boolean,
            default: false,
        },
        isNowBuy: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        imgSrc() {
            const { info } = this.$props;
            const pic = info.title_pic ? info.title_pic : (info.title_pics ? info.title_pics[0] : '');
            return createShopImageSrc(pic);
        },
        selectPrice() {
            const { info } = this.$props;
            const skus = this.selectSku ? info.skus.filter(item => item.id === this.selectSku.id) : info.skus;
            return skus[0] ? skus[0].price : 0;
        },
        selectStr() {
            let str = [];
            const prop = Object.values(this.selectProperties);
            if (prop.length > 0) {
                const list = prop.map(item => item);
                str = str.concat(list);
            }
            return str.length > 0 ? str.join('/') : '未选择';
        },
        // 操作按钮文案
        actionBtnText() {
            const { isOnlySelect, isChangeSku, isAddBag, isNowBuy } = this.$props;
            let text = '';
            if (isOnlySelect) {
                text = '选好了';
            }
            if (isChangeSku) {
                text = '确认';
            }
            if (isAddBag) {
                text = '加入购物车';
            }
            if (isNowBuy) {
                text = '立即购买';
            }
            return text;
        },
        // 规格信息
        skuValue() {
            const { info } = this.$props;
            if (this.selectProperties) {
                return info.skus.filter(item => compareArray(this.selectProperties, item.items))[0];
            }
            return info.skus[0];
        },
        isDisableAction() {
            // if (this.selectSku && this.selectSku.storage && this.selectSku.storage > 0) {
            //     return false;
            // } else {
            //     return true;
            // }
            return false;
        },
    },
    data() {
        return {
            visiable: false,
            selectSku: null,
            selectProperties: {},
            count: 1,
        };
    },
    methods: {
        show() {
            const { info } = this.$props;
            if (info.skus.length === 1) {
                this.selectSku = info.skus[0];
            } else {
                this.selectSku = getDefaultSku(info);
                this.selectProperties = this.arrayToObject(this.selectSku.items);
            }
            setTimeout(() => {
                this.visiable = true;
            }, 100);
        },
        close() {
            this.visiable = false;
        },
        // 选择规格
        selectStandar(info) {
            this.selectSku = info;
        },
        // 选择属性
        selectPropertie(info, index) {
            logger.info('选择的项为：', info, index);
            const tempProperties = this.selectProperties;
            this.selectProperties = null;
            tempProperties[index] = info;
            this.selectProperties = tempProperties;
            this.selectSku = this.$props.info.skus.filter(item => compareArray(this.objectToArray(this.selectProperties), item.items))[0];
        },
        // 数量改变
        countChange(count) {
            logger.debugger('购买数量改变 => ', count);
            this.count = count;
        },
        // 确认修改规格
        ensureChangeSku() {},
        // 确认操作
        ensureAction() {
            this.$emit('ensure', {
                ...this.selectSku,
                quantity: this.count,
            });
            this.close();
        },
        objectToArray(obj) {
            const result = [];
            for (let key in obj) {
                result.push(obj[key]);
            }
            return result;
        },
        arrayToObject(arr) {
            const result = {};
            for (let i = 0; i < arr.length; i++) {
                result[i] = arr[i];
            }
            return result;
        }
    },
};
</script>

<style lang="less">
.tech-choose-goods {
    z-index: 2003 !important;
    box-sizing: border-box;
    overflow: hidden;
    height: 530px;
    height: calc(530px + constant(safe-area-inset-bottom));
    height: calc(530px + env(safe-area-inset-bottom));
    .style-mode-top();
    .mode-white();
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    .product-content {
        position: relative;
        height: 100%;
    }
    .product-info {
        height: 305px;
        .scroll-y();
        .p(@shop-gap-md);
        .p-t(0)
    }
    .action-btn-container {
        height: 75px;
        .flex-row-center();
        position: fixed;
        bottom: 0;
        bottom: constant(safe-area-inset-bottom);
        bottom: env(safe-area-inset-bottom);
        left: 0;
        right: 0;
        .tech-btn {
            .m-h(@shop-gap-md);
            height: 45px;
            line-height: 45px;
        }
    }
}
.tech-choose-goods-overlay {
    z-index: 2002 !important;
}
</style>
